<template>
    <div class="tabbar">
        <ul>
            <!-- 实现方式一 -->
            <!-- <li><a href="#/films">电影</a></li>
            <li><a href="#/cinemas">影院</a></li>
            <li><a href="#/center">我的</a></li> -->

            <!-- 实现方式二 -->
            <!-- <li>
                <router-link to="/films" active-class="kerwinactive">电影</router-link>
            </li>
            <li>
                <router-link to="/cinemas" active-class="kerwinactive">影院</router-link>
            </li>
            <li>
                <router-link to="/center" active-class="kerwinactive">我的</router-link>
            </li> -->

            <!-- 定制router_link为我们指定的节点 -->
            <router-link custom to="/films" v-slot="{ isActive, navigate }">
                <li :class="isActive ? 'kerwinactive' : ''" @click="navigate">电影</li>
            </router-link>

            <router-link custom to="/cinemas" v-slot="{ isActive, navigate }">
                <li :class="isActive ? 'kerwinactive' : ''" @click="navigate">影院</li>
            </router-link>
            <router-link custom to="/center" v-slot="{ isActive, navigate }">
                <li :class="isActive ? 'kerwinactive' : ''" @click="navigate">我的</li>
            </router-link>

        </ul>
    </div>
</template>

<style scoped lang="scss">
.kerwinactive {
    color: pink;
}

.tabbar {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: gray;
    z-index: 100;

    ul {
        display: flex;

        li {
            flex: 1;
        }
    }
}
</style>